<template>
  <div style="background: #fff; padding: 30px">
    <div class="Title">D级站点活动列表</div>
    <div class="flewbtn">
      <el-select
        @focus="isFocus"
        @blur="clickBlur"
        v-model="state.value"
        placeholder="展具类型"
        class="elSelect_a"
        size="large"
      >
        <el-option
          v-for="item in state.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :popper-append-to-body="false"
        />
      </el-select>
      <el-select
        v-model="state.valueTwo"
        placeholder="展具级别"
        class="elSelect_a"
        size="large"
      >
        <el-option
          v-for="item in state.optionsTwo"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button size="large" type="primary">查询</el-button>
      <el-button size="large">清除</el-button>
      <el-button size="large">增加</el-button>
    </div>
    <!-- 展示和编辑表格 -->
    <el-scrollbar style="margin-bottom: 20px" height="700px">
      <el-table
        :data="filterTableData"
        :header-cell-style="{
          'text-align': 'center',
          background: '#f2f3f5',
          height: '50px',
          color: '#000000',
          'font-size': '15px',
        }"
        :cell-style="{ 'text-align': 'center' }"
        style="width: 100%"
        height="620"
        ref="multipleTableRef"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="站点名称" prop="siteTitle" width="220" />
        <el-table-column label="活动时间" prop="siteTime" width="220" />
        <el-table-column label="展会名称" prop="siteName" width="220" />
        <el-table-column label="展会号" prop="num" width="180" />
        <el-table-column label="展馆平面图" prop="plan" width="250">
          <template v-slot="scope">
            <img :src="scope.row.plan" min-width="70" height="70" />
          </template>
        </el-table-column>
        <el-table-column label="展馆限高" prop="Height_limit" width="220" />
        <el-table-column label="展馆规格" prop="specs" width="220" />
        <el-table-column label="展具设计" prop="designImg" width="250">
          <template v-slot="scope">
            <img :src="scope.row.designImg" min-width="70" height="70" />
          </template>
        </el-table-column>
        <el-table-column label="展车数量" prop="cars_quantity" width="220" />
        <el-table-column label="货车数量" prop="goods_quantity" width="220" />
        <el-table-column label="活动状态" prop="active_state" width="220" />
        <el-table-column label="管理人员" prop="management" width="220" />
        <el-table-column align="right" width="220">
          <!-- <template #header>
                    <el-input v-model="search" size="small" placeholder="Type to search" />
                  </template> -->
          <template #header>
            <div>操作</div>
          </template>
          <template #default="scope">
            <!-- <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
            <el-button
              size="small"
              @click="handleEdit(scope.$index, scope.row)"
              type="primary"
              text
              >编辑</el-button
            >
            <el-button
              size="small"
              @click="handleDelete(scope.$index, scope.row)"
              type="primary"
              text
              >删除
            </el-button>
            <el-button
              size="small"
              @click="handleDelete(scope.$index, scope.row)"
              type="primary"
              text
              >刷新
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
    <!-- 分页显示 -->
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      background
      :page-sizes="[5, 10, 15, 20]"
      :small="small"
      :disabled="disabled"
      layout="total, sizes, prev, pager, next, jumper"
      :total="20"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="display: flex; justify-content: flex-end"
    />

    <!-- 编辑对话框 -->
    <el-dialog
      v-model="state.showModel"
      title="编辑项目"
      width="500px"
      align-center
      style="font-weight: 600"
    >
      <el-scrollbar height="600px">
        <div
          style="display: flex; justify-content: center; align-items: center"
        >
          <div
            style="
              flex: 2;
              line-height: 20px;
              text-align: center;
              font-weight: 600;
            "
          >
            创建名称
          </div>
          <el-input
            v-model="state.inputVal"
            size="small"
            style="flex: 8"
            class="enterpriseName"
          />
        </div>
        <div style="display: flex; margin-top: 15px">
          <div
            style="
              flex: 2;
              line-height: 22px;
              text-align: center;
              width: 78px;
              font-weight: 600;
            "
          >
            活动时间
          </div>
          <el-select v-model="state.mouldVal" class="elSelect" size="small">
            <el-option
              v-for="item in state.mouldArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 12px;
          "
        >
          <div
            style="
              flex: 2;
              line-height: 38px;
              text-align: center;
              font-weight: 600;
            "
          >
            展会名称
          </div>
          <el-input
            v-model="state.inputVal"
            style="flex: 8"
            size="small"
            class="enterpriseName"
          />
        </div>
        <div
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 12px;
          "
        >
          <div
            style="
              line-height: 38px;
              text-align: center;
              font-weight: 600;
              margin-left: 32px;
              margin-right: 18px;
            "
          >
            展位号
          </div>
          <el-input
            v-model="state.inputVal"
            style="flex: 8"
            size="small"
            class="enterpriseName"
          />
        </div>
        <div style="display: flex; margin-top: 18px; margin-bottom: 25px">
          <div
            style="
              margin: 20px 18px 17px 7px;
              font-weight: 600;
              width: 88px;
              text-align: end;
            "
          >
            上传图片
          </div>
          <div>
            <el-upload
              v-model:file-list="state.fileList"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
            <el-dialog v-model="state.dialogVisible">
              <img w-full :src="state.dialogImageUrl" alt="Preview Image" />
            </el-dialog>
            <div style="font-size: 10px; color: #b8b8b8; margin-top: 5px">
              {{ state.picTip }}
            </div>
          </div>
        </div>
        <div
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 12px;
          "
        >
          <div
            style="
              flex: 2;
              line-height: 38px;
              text-align: center;
              font-weight: 600;
            "
          >
            展馆限高
          </div>
          <el-input
            v-model="state.inputVal"
            style="flex: 8"
            size="small"
            class="enterpriseName"
          />
        </div>
        <div
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 12px;
          "
        >
          <div
            style="
              flex: 2;
              line-height: 38px;
              text-align: center;
              font-weight: 600;
            "
          >
            展台规格
          </div>
          <el-input
            v-model="state.inputVal"
            style="flex: 8"
            size="small"
            class="enterpriseName"
          />
        </div>
        <div style="display: flex; margin-top: 15px">
          <div
            style="
              flex: 2;
              line-height: 22px;
              text-align: center;
              width: 78px;
              font-weight: 600;
            "
          >
            路线选择
          </div>
          <el-select v-model="state.mouldVal" class="elSelect" size="small">
            <el-option
              v-for="item in state.mouldArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div style="display: flex; margin-top: 25px; margin-bottom: 25px">
          <div
            style="
              margin: 20px 14px 23px 7px;
              font-weight: 600;
              width: 90px;
              text-align: end;
              display: flex;
            "
          >
            <div>站点</div>
            <div>LOGO</div>
          </div>
          <div>
            <el-upload
              v-model:file-list="state.fileList"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
            <el-dialog v-model="state.dialogVisible">
              <img w-full :src="state.dialogImageUrl" alt="Preview Image" />
            </el-dialog>
            <div style="font-size: 10px; color: #b8b8b8; margin-top: 5px">
              {{ state.picTip }}
            </div>
          </div>
        </div>
        <div style="display: flex; margin-top: 20px">
          <div
            style="
              font-weight: 600;
              display: flex;
              justify-content: center;
              margin-top: 7px;
              margin-right: 7px;
            "
          >
            分配运营人员
          </div>
          <div
            style="
              flex: 8;
              background-color: #e8e8e8;
              padding-left: 6px;
              border-radius: 3px;
              box-sizing: border-box;
            "
          >
            <el-checkbox-group v-model="state.worktype" :max="1" fill="#409eff">
              <el-checkbox label="张三" name="worktype" />
              <el-checkbox label="李四" name="worktype" />
              <el-checkbox label="王五" name="worktype" />
            </el-checkbox-group>
          </div>
        </div>
        <div style="display: flex; margin-top: 15px">
          <div style="margin: 10px 15px 10px 20px; font-weight: 600">
            站点状态
          </div>
          <el-radio-group
            fill="#409eff"
            v-model="state.radioState"
            size="small"
          >
            <el-radio-button label="启用" />
            <el-radio-button label="停用" />
          </el-radio-group>
        </div>
        <div class="dialog-footer">
          <el-button size="small" @click="centerDialogVisible = false">
            取消
          </el-button>
          <el-button
            type="primary"
            size="small"
            @click="centerDialogVisible = false"
          >
            确认
          </el-button>
        </div>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>
    
    <script setup>
import { toRefs, reactive, computed, ref } from "vue";
import { ArrowDown, Plus } from "@element-plus/icons-vue";

const state = reactive({
  value: "",
  options: [
    {
      value: "展具物流到货",
      label: "展具物流到货",
    },
    {
      value: "卸货说明",
      label: "卸货说明",
    },
    {
      value: "立柱到位立正",
      label: "立柱到位立正",
    },
  ],
  valueTwo: "",
  optionsTwo: [
    {
      value: "B级",
      label: "B级",
    },
    {
      value: "C级",
      label: "C级",
    },
    {
      value: "E级",
      label: "E级",
    },
  ],
  mouldVal: "",
  mouldArr: [
    {
      value: "模板1",
      label: "模板1",
    },
    {
      value: "模板2",
      label: "模板2",
    },
    {
      value: "模板3",
      label: "模板3",
    },
  ],
  modelVal: "选择模板",
  tableData: [
    {
      siteTitle: "乌鲁木齐",
      siteTime: "2023.03.17-03.25",
      siteName: "2023第三届新疆315国际车展",
      num: "20201",
      plan: "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
      Height_limit: "8.5m",
      specs: "20m*40m",
      designImg:
        "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
      cars_quantity: "5台",
      goods_quantity: "2台",
      active_state: "2D201",
      management: "张三",
    },
    {
      siteTitle: "乌鲁木齐",
      siteTime: "2023.03.17-03.25",
      siteName: "2023第三届新疆315国际车展",
      num: "20201",
      plan: "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
      Height_limit: "8.5m",
      specs: "20m*40m",
      designImg:
        "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
      cars_quantity: "5台",
      goods_quantity: "2台",
      active_state: "2D201",
      management: "张三",
    },
    {
      siteTitle: "乌鲁木齐",
      siteTime: "2023.03.17-03.25",
      siteName: "2023第三届新疆315国际车展",
      num: "20201",
      plan: "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
      Height_limit: "8.5m",
      specs: "20m*40m",
      designImg:
        "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
      cars_quantity: "5台",
      goods_quantity: "2台",
      active_state: "2D201",
      management: "张三",
    },
    {
      siteTitle: "乌鲁木齐",
      siteTime: "2023.03.17-03.25",
      siteName: "2023第三届新疆315国际车展",
      num: "20201",
      plan: "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
      Height_limit: "8.5m",
      specs: "20m*40m",
      designImg:
        "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
      cars_quantity: "5台",
      goods_quantity: "2台",
      active_state: "2D201",
      management: "张三",
    },
    {
      siteTitle: "乌鲁木齐",
      siteTime: "2023.03.17-03.25",
      siteName: "2023第三届新疆315国际车展",
      num: "20201",
      plan: "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
      Height_limit: "8.5m",
      specs: "20m*40m",
      designImg:
        "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
      cars_quantity: "5台",
      goods_quantity: "2台",
      active_state: "2D201",
      management: "张三",
    },
    {
      siteTitle: "乌鲁木齐",
      siteTime: "2023.03.17-03.25",
      siteName: "2023第三届新疆315国际车展",
      num: "20201",
      plan: "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
      Height_limit: "8.5m",
      specs: "20m*40m",
      designImg:
        "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
      cars_quantity: "5台",
      goods_quantity: "2台",
      active_state: "2D201",
      management: "张三",
    },
    {
      siteTitle: "乌鲁木齐",
      siteTime: "2023.03.17-03.25",
      siteName: "2023第三届新疆315国际车展",
      num: "20201",
      plan: "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
      Height_limit: "8.5m",
      specs: "20m*40m",
      designImg:
        "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
      cars_quantity: "5台",
      goods_quantity: "2台",
      active_state: "2D201",
      management: "张三",
    },
    {
      siteTitle: "乌鲁木齐",
      siteTime: "2023.03.17-03.25",
      siteName: "2023第三届新疆315国际车展",
      num: "20201",
      plan: "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
      Height_limit: "8.5m",
      specs: "20m*40m",
      designImg:
        "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
      cars_quantity: "5台",
      goods_quantity: "2台",
      active_state: "2D201",
      management: "张三",
    },
    {
      siteTitle: "乌鲁木齐",
      siteTime: "2023.03.17-03.25",
      siteName: "2023第三届新疆315国际车展",
      num: "20201",
      plan: "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
      Height_limit: "8.5m",
      specs: "20m*40m",
      designImg:
        "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
      cars_quantity: "5台",
      goods_quantity: "2台",
      active_state: "2D201",
      management: "张三",
    },
  ],
  showModel: false, //显示编辑弹窗
  inputVal: "",
  fileList: [],
  dialogImageUrl: "",
  dialogVisible: false,
  picTip:
    "建议宽高比16:9780*438<尺寸<2560*1440 格式:JPG/JPEG/PNG文件大小≤1000KB",
  radioState: "启用",
  worktype: [],
  vestVal: [],
  siteVest: [],
});

const isFocus = (e) => {
  console.log("鼠标聚焦了", e);
};
const clickBlur = (e) => {
  console.log("鼠标离开了", e);
};

// 显示图表逻辑
const search = ref("");
const filterTableData = computed(() =>
  state.tableData.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
);
// 编辑
const handleEdit = (index, row) => {
  state.showModel = true;
  console.log(index, row);
};
// 删除
const handleDelete = (index, row) => {
  console.log(index, row);
};

// 多选和单选的逻辑
const multipleTableRef = ref();
const multipleSelection = ref([]);
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
  console.log(val, ">>>>>>>>>>>所有选中项");
};

// 分页显示逻辑
const currentPage4 = ref(4);
const pageSize4 = ref(5);
const small = ref(false);
const disabled = ref(false);

const handleSizeChange = (val) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
};

// 上传图片逻辑
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};

const handlePictureCardPreview = (uploadFile) => {
  console.log(">>>>>>>>预览显示的图片", uploadFile.url);
  state.dialogImageUrl = uploadFile.url;
  state.dialogVisible = true;
};

// 文本域变量
const textarea = ref("");
</script>
    
    <style scoped>
.Title {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 20px;
}

.flewbtn {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.elSelect_a {
  border-radius: 15px;
  width: 250px;
  margin-right: 15px;
}
::v-deep .elSelect_a .el-input__wrapper {
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  box-sizing: border-box;
  box-shadow: none;
}

.elSelect {
  border-radius: 15px;
  width: 250px;
  /* height: 28px; */
  flex: 8;
}
::v-deep .elSelect .el-input__wrapper {
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  box-sizing: border-box;
  box-shadow: none;
}

::v-deep .elSelect .el-input__wrapper:focus {
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  box-sizing: border-box;
  box-shadow: none;
  color: #c0c4cc;
}

::v-deep .elSelect .el-input__inner {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  box-shadow: none;
  padding: 0;
}

/* 改变输入框样式 */
::v-deep .enterpriseName .el-input__inner {
  /* width:100%; */
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  color: #000;
  padding: 10px;
  box-sizing: border-box;
  /* border-radius: 5px; */
  height: 25px;
  border-radius: 3px;
}

.enterpriseName ::v-deep .el-input__inner {
  border: none;
}

::v-deep .enterpriseName .el-input__wrapper {
  padding: 0;
}

/* 改变上传按钮样式 */
::v-deep.el-upload--picture-card,
::v-deep .el-upload-list__item {
  width: 100px;
  height: 100px;
  line-height: 110px;
  border: none;
  background: #fff;
}

/* 改变选择器样式 */
::v-deep .Selectbox .el-input__wrapper {
  /* width:100%; */
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  color: #000;
  padding: 10px;
  box-sizing: border-box;
  /* border-radius: 5px; */
  height: 28px;
  width: 100% !important;
  flex: 8;
}
::v-deep .Selectbox .el-input__wrapper .el-input__inner {
  border: none;
}
/* 改变文本域样式 */
::v-deep .textTip .el-textarea__inner {
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  color: #000;
  padding: 10px;
  box-sizing: border-box;
}

.block-col-2 .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

/* 隐藏横向滚动条 */
.el-scrollbar__bar {
  display: none !important;
}

#el-id-878-3 .el-dialog__body {
  padding: 0 !important;
}

/* 改变上传框框的大小 */
::v-deep .el-upload--picture-card {
  border: 1px dashed #e7e7e9;
}
::v-deep .el-upload--picture-card:hover {
  border-color: #e7e7e9;
  color: #e7e7e9;
}
::v-deep .el-upload--picture-card {
  width: 70px;
  height: 70px;
  font-size: 16px !important;
}
::v-deep .el-upload {
  width: 70px;
  height: 70px;
  line-height: 50px;
  font-size: 16px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 70px;
  height: 70px;
  line-height: 50px;
  font-size: 16px;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item-actions:hover {
  opacity: 1;
  font-size: 16px;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 70px;
  height: 70px;
  line-height: 50px;
  font-size: 16px;
}
::v-deep .el-upload--picture-card .el-icon-plus {
  width: 28px;
  height: 28px !important;
  line-height: 1.7 !important;
}
::v-deep .avatar {
  width: 70px;
  height: 70px;
}

/* 确认按钮样式 */
.dialog-footer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 40px;
}

::v-deep(
    .el-pagination.is-background .el-pager li:not(.is-disabled).is-active
  ) {
  background-color: #409eff !important;
}
</style>
    